<template>
  <div>
    <transition name="el-zoom-in-center">
      <div :key="tooltipId" ref="customAlert" :style="display" class="custom-demo" transiton="el-zoom-in-center">
        <div class="custom-alter-content">
          <el-scrollbar style="height: 100%;overflow-y: auto">
            <div
              v-for="item in dataList"
              :key="'dia-'+item.id"
              class="dialog-item-ul"
              @mouseenter="openAlert(item)"
              @mouseleave="closeAlert"
            >
              <!--              <router-link :to="'/s/service?pid=' + parent.id + '&cid=' + item.id" tag="a" target="_blank">-->
              <div class="dialog-item-title" :style="first === item.id ? firstStyle: ''">
                {{ item.title }}
                <div class="dialog-more" :style="first === item.id ? firstStyle: ''"><i class="el-icon-right" /></div>
              </div>
              <!--              </router-link>-->
              <div
                v-for="child in item.list"
                :key="'service-'+child.id"
                class="dialog-item-li"
                :style="thread === child.id ? firstStyle: ''"
                @mouseenter="openChild(child)"
                @mouseleave="closeChild"
                @click="entityCallBack(child)"
              >
                <!--                <router-link :to="'/uc/service/entity?sid=' + child.id" tag="a" target="_blank">-->
                {{ child.name }}
                <!--                </router-link>-->
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </transition>
    <slot name="reference" />
  </div>
</template>

<script>
import { generateId } from 'element-ui/src/utils/util';
import { queryAllServiceByPid } from '@/api/config/special';
import { isEmpty } from 'lodash';
export default {
  name: 'ServiceList',
  props: {
    trigger: {
      type: String,
      default: 'click',
      validator: value => ['click', 'focus', 'hover', 'manual'].indexOf(value) > -1
    }
  },
  data() {
    return {
      isShow: false,
      display: { display: 'none' },
      data: {},
      dataList: [],
      firstStyle: {},
      first: null,
      thread: null
    };
  },
  computed: {
    themes() {
      return this.$store.getters.theme;
    },
    tooltipId() {
      return `el-popover-${generateId()}`;
    }
  },
  watch: {
    themes: {
      handler(newData, OldData) {
        this.firstStyle.color = newData.changeFontColor;
        this.firstStyle = Object.assign({}, this.firstStyle);
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  mounted() {
    if (this.trigger === 'click' && undefined !== this.$refs.customAlert) { // click 事件
      this.$refs.customAlert.addEventListener('click', this.triggerOnClick);
    }
    if (this.trigger === 'hover' && undefined !== this.$refs.customAlert) {
      this.$refs.customAlert.addEventListener('mouseenter', this.triggerOpen);
      this.$refs.customAlert.addEventListener('mouseleave', this.triggerClose);
    }
  },
  destroyed() {
    if (this.trigger === 'click' && undefined !== this.$refs.customAlert) { // click 事件
      this.$refs.customAlert.removeEventListener('click', this.triggerOnClick);
    }
    if (this.trigger === 'hover' && undefined !== this.$refs.customAlert) {
      this.$refs.customAlert.removeEventListener('mouseenter', this.triggerOpen);
      this.$refs.customAlert.removeEventListener('mouseleave', this.triggerClose);
    }
  },
  methods: {
    openAlert(item) {
      this.first = item.id;
    },
    openChild(data) {
      this.thread = data.id;
    },
    closeAlert() {
      this.first = null;
    },
    closeChild() {
      this.thread = null;
    },
    triggerOnClick(data) {
      if (undefined !== data && data !== null) {
        this.data = data;
      }
      if (this.isShow) {
        this.display = { display: 'none' };
        this.isShow = false;
      } else {
        this.display = { display: 'block', background: this.$store.getters.theme.columnGroundColor, color: this.$store.getters.theme.fontColor };
        this.isShow = true;
        this.init();
      }
    },
    triggerOpen() {
      this.isShow = true;
      this.display = { display: 'block', background: this.$store.getters.theme.columnGroundColor, color: this.$store.getters.theme.fontColor };
      this.$emit('callBack', this.isShow);
    },
    triggerClose() {
      this.isShow = false;
      this.display = { display: 'none' };
      this.$emit('callBack', this.isShow);
    },
    entityCallBack(data) {
      this.$emit('fact-entity', data);
    },
    init() {
      const datas = sessionStorage.getItem('dataList-' + this.data.id);
      if (!isEmpty(datas)) {
        this.dataList = JSON.parse(datas);
      } else {
        queryAllServiceByPid({ pid: this.data.id, zxpt: 'pc' }).then(res => {
          const { data } = res;
          if (!isEmpty(data)) {
            this.dataList = data.data;
            sessionStorage.setItem('dataList-' + this.data.id, JSON.stringify(this.dataList));
          }
        });
      }
    }
  }
};
</script>
<style scoped>
.custom-demo{
  position: fixed;
  width: 300px;
  right: -298px;
  top: 40px;
  bottom: 0px;
  z-index: 1000;
  border-radius: 0px 4px 4px 0px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  padding: 10px;
  box-sizing: border-box;
}
.custom-alter-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row wrap;
}
.dialog-item-ul {
  flex: 0 1 auto;
  width: 50%;
  float: left;
  min-height: 50px;
  padding: 0px 10px;
  box-sizing: border-box;
}
.dialog-item-title {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: left;
  font-size: 14px;
  font-weight: bold;
  position: relative;
  cursor: pointer;
}
.dialog-more {
  width: 50px;
  height: 50px;
  line-height: 50px;
  position: absolute;
  right: 5px;
  top: 0px;
  text-align: right;
}
.dialog-item-title:hover,.dialog-item-title:hover .dialog-more {
  display: block;
}
.dialog-item-li {
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-size: 0.8rem;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.el-scrollbar >>> .el-scrollbar__wrap {
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
